<template>
	<div class="text-#000000 pl-30px pr-30px pb-30px">
		<!-- 单价 -->
		<p class="text-14px mb-10px">
			<span class="text-#86909C">单价</span>
			<span class="text-bold">12.00CNY(30秒)</span>
		</p>
		<!-- 您将支付 -->
		<div class="border border-solid border-1px border-#E5E6EB rounded-10px p-10px">
			<p class="text-16px mb-10px">您将出售</p>
			<div class="flex items-center justify-between">
				<el-input placeholder="输入" v-model="payAccount">
				</el-input>
				<div class="flex items-center justify-center">
					<img src="/home/eth.svg" alt="" class="w-20px h-20px rounded-50% pr-10px" />
					<span class="text-bold">ETH</span>
				</div>
			</div>
		</div>
		<p class="ml-20px mt-10px">
			<span class="text-#86909C mr-10px">资金账户可用余额为0.00</span>
			<span class="text-#114CEE" @click="rechargeDialog = true">去划转</span>
		</p>
		<!-- 您收到 -->
		<div class="border border-solid border-1px border-#E5E6EB rounded-10px p-10px mt-10px">
			<p>您收到</p>
			<div class="flex items-center justify-between mt-10px">
				<el-input placeholder="100-200000" v-model="getPayAccount">
				</el-input>
				<div class="flex items-center">
					<img src="/transaction/c2c/quick/CNY.svg" alt="" class="w-20px h-20px rounded-50% pr-10px" />
					<span class="text-bold">CNY</span>
				</div>
			</div>
		</div>
		<!-- 支付方式 -->
		<div class="mt-20px w-100% mb-100px">
			<el-select v-model="selectedPay.aId" placeholder="选择支付方式" placement="bottom-start" @change="changePay"
				:suffix-icon="CaretBottom" size="large" popper-class="c2c-select-optional-popper-pay-dialog-level2"
				style="width: 100%">
				<template #label="{ label, value }">
					<div class="flex items-center text-#000000 text-16px">
						<p class="w-4px h-14px mr-10px" :style="{ backgroundColor: selectedPay.color }"></p>
						<p class="mr-10px" >
							{{ selectedPay.name }} 
						</p>
						<p class="mr-10px">{{ selectedPay.account }}</p>
						<p class="mr-10px">{{ selectedPay.tell }}</p>
					</div>
				</template>
				<el-option-group v-for="item in payList" :key="item.id">
					<template #default>
						<div class=" bg-#ffffff mb-10px border-b-1px border-solid border-#eeeeee  m-20px">
							<div class="flex items-center text-16px text-#000000">
								<p class="w-4px h-14px mr-10px" :style="{ backgroundColor: item.color }"></p>
								<p>{{ item.name }}</p>
							</div>
							<el-option v-for="i in item.list" :key="i.aId" :label="i.account" :value="i.aId">
								<template #default>
									<div @click="changePay(i.aId)" class="flex items-center justify-between ">
										<div class="flex items-center
									text-16px text-#000000">
											<p class="mr-10px">{{ i.account }}</p>
											<p class="mr-10px">{{ i.tell }}</p>
										</div>

										<el-icon v-if="selectedPay.aId === i.aId"><Select /></el-icon>
									</div>
								</template>
							</el-option>
						</div>
					</template>
				</el-option-group>

			</el-select>
		</div>
		<!-- 按钮 -->
		<div>
			<el-button type="primary" class="w-100% mt-20px " style="color:#86909C;padding:20px 0" color="#ECECF0"
				v-if="payAccount == ''">
				0手续费出售 ETH
			</el-button>
			<el-button type="primary" class="w-100% mt-20px " style="color:#FFFFFF;padding:20px 0" color="#F34E5F" v-else
				@click="toOrderDetail">
				0手续费出售 ETH
			</el-button>
		</div>
	</div>
	<RechargeDialog :show="rechargeDialog" @close="closeRechargeDialog"></RechargeDialog>
</template>
<script lang="ts" setup>
import { CaretBottom } from '@element-plus/icons-vue';
import RechargeDialog from '@/views/transaction/c2c/components/RechargeDialog.vue'
import useJump from '@/utils/jump';

const { jumpTo } = useJump()

// 充值弹窗
const rechargeDialog = ref<boolean>(false);

const closeRechargeDialog = (val:boolean)=>{
	rechargeDialog.value = val;
}

// 跳转到订单详情页
const toOrderDetail = () => {
	jumpTo('/transaction/c2c/optionalSell', {
		id: 'ek1239128378123sell'
	})
}


const payList = ref<any[]>([
	{
		id: '1',
		color: "#1187EE",
		name: "支付宝",
		list: [
			{
				aId: '1',
				account: "夏天",
				tell: "15256523620"
			},
			{
				aId: '2',
				account: "夏天",
				tell: "15256523620"
			}
		]
	},
	{
		id: '2',
		color: "#11EE45",
		name: "微信",
		list: [
			{
				aId: '3',
				account: "夏天",
				tell: "15256523620"
			},
			{
				aId: '4',
				account: "夏天",
				tell: "15256523620"
			}
		]
	},
	{
		id: '3',
		color: "#FC9559",
		name: "银行借记卡",
		list: [
			{
				aId: '5',
				account: "夏天",
				tell: "15256523620"
			},
			{
				aId: '6',
				account: "夏天",
				tell: "15256523620"
			}
		]
	}
])
const selectedPay = ref<any>(
	{
		id: '1',
		color: "#1187EE",
		name: "支付宝",
		aId: '1',
		account: "夏天",
		tell: "15256523620"
	}
)
// 支付方式切换
function changePay(id: any) {
	payList.value.forEach((item: any) => {
		item.list.forEach((account:any)=>{
			if (account.aId === id) {
				selectedPay.value.id = item.id;
				selectedPay.value.name = item.name;
				selectedPay.value.color = item.color;
				selectedPay.value.aId = account.aId;
				selectedPay.value.account = account.account;
				selectedPay.value.tell = account.tell;
			}
		})
	});
}

// 支付金额
const payAccount = ref<string>('')
// 收到金额
const getPayAccount = ref<string>('')
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
	color: #000000;
	font-size: 20px;
}

::v-deep .el-input,
::v-deep .el-input__wrapper {
	border: none;
	box-shadow: none;
	/* 如果有阴影，也可以关闭 */
	padding: 0 1px;
}
</style>
